import React from 'react';
import { Space, Button } from 'antd';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';

const CollapseFold: React.FC<CollapseFormAPI.CollapseFoldProps> = ({ register }) => {
  const { activeKey, activeKeys, changeActiveKey } = register;

  /**
   * @operate 折叠面板操作事件
   * @param clickType 操作内容项
   */
  const operate = (clickType: string) => {
    if (clickType == 'allOpen') {
      changeActiveKey(activeKeys);
    } else {
      changeActiveKey([]);
    }
  };

  return (
    <Space>
      <Button
        type={activeKeys.length == 0 ? 'dashed' : 'primary'}
        size={'small'}
        icon={<DoubleLeftOutlined className={'conmpanyCardExtra'} style={{ transform: 'rotate(90deg)' }} />}
        className='manageBtntTxtStyle'
        onClick={() => {
          operate('allClose');
        }}
        disabled={activeKey.length == 0 ? true : false}
      >
        全部折叠
      </Button>
      <Button
        type={activeKeys.length != 0 ? 'dashed' : 'primary'}
        size={'small'}
        icon={<DoubleRightOutlined className={'conmpanyCardExtra'} style={{ transform: 'rotate(90deg)' }} />}
        className='manageBtntTxtStyle'
        onClick={() => {
          operate('allOpen');
        }}
        disabled={activeKeys.length == activeKey.length ? true : false}
      >
        全部展开
      </Button>
    </Space>
  );
};
export default CollapseFold;
